<template>
  <view class="radar-chart" :style="{ height: height + 'px' }">
    <cover-view class="data-wrap">
      <view class="center-data">
        <view v-if="props.score" class="score">
          <text class="score-value">{{ props.score }}</text>
          <text class="score-unit">分</text>
        </view>
        <view v-if="props.quarter" class="quarter">{{ props.quarter }}</view>
      </view>
    </cover-view>
    <BaseChart :options="options" />
  </view>
</template>

<script setup>
import BaseChart from '@/components/BaseChart.vue'
// import { RADAR_INDICATOR } from '../configs/constant'

// #ifdef MP
const echarts = require('../../../uni_modules/lime-echart/static/echarts.min')
// #endif

const props = defineProps({
  height: {
    type: Number,
    default: 300,
  },
  data: {
    type: Array,
    default: () => {
      return []
    },
  },
  indicator: {
    type: Array,
    default: () => {
      return []
    },
  },
  quarter: {
    type: String,
    default: '',
  },
  score: {
    type: String,
    default: '',
  },
})

const options = computed(() => {
  return {
    radar: {
      shape: 'circle',
      indicator: props.indicator,
    },
    series: [
      {
        type: 'radar',
        label: {
          show: true,
        },
        data: [
          {
            value: props.data,
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                {
                  color: 'rgba(255, 145, 124, 0.1)',
                  offset: 0,
                },
                {
                  color: 'rgba(255, 145, 124, 0.6)',
                  offset: 1,
                },
              ]),
            },
          },
        ],
      },
    ],
  }
})
</script>

<style lang="scss" scoped>
.radar-chart {
  position: relative;

  .data-wrap {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    .score {
      text-align: center;

      &-value {
        font-size: 42px;
        font-weight: 600;
        background: linear-gradient(135deg, $uni-color-success, $uni-color-primary);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>
